<template>
  <div class="content">
    <div class="backgroundBule"></div>
    <div class="kong"></div>
    <div class="cont">
      <div class="contShow">
        <div class="show">
          <div class="left">
            <img :src="account.logo" mode="aspectFill" class="logo" />
            <span>{{account.shopName}}</span>
          </div>
          <div class="right">
            <p>
              当前默认
              <span>{{info.templateType === '0' ? '默认' : info.templateType === '1' ? '模板一' : info.templateType === '2' ? '模板二' : info.templateType === '3' ? '模板三' : '模板四'}}</span>
            </p>
            <div v-for="(item,index) in fitment1" :key="index">
              <!-- <img :src="item.idx === info.templateType ? item.src : ''" alt /> -->
              <img v-if="item.idx === info.templateType" :src="item.src" alt />
            </div>
          </div>
        </div>
      </div>
      <div class="templateSelect">
        <p class="templateSelectTitle">模板选择</p>
        <div class="templateSelectBox">
          <div v-for="(item,index) in fitment1" :key="index">
            <div @click="templateSelect(item.idx)">
              <span v-if="item.isState">正在使用</span>
              <img :src="item.src" alt />
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="consigneeInfo">
      <div class="topInfo">
        <img class="headPortrait" :src="info.src" alt />
        <div>
          <span>{{info.name}}</span>
          <p>
            当前使用模板
            <span>{{info.templateType === '0' ? '默认' : info.templateType === '1' ? '模板一' : info.templateType === '2' ? '模板二' : info.templateType === '3' ? '模板三' : '模板四'}}</span>
          </p>
        </div>
      </div>
      <div class="TopBtnBox">
        <p @click="serviceMode">服务方式</p>
        <p @click="setVerification">核销码设置</p>
      </div>
    </div>-->
  </div>
</template>

<script>
import { FIND_SHOP_DECORATION } from '@/api'

export default {
  components: {},
  data () {
    return {
      info: {
        name: '',
        src: '',
        templateType: '',
        goodsTypeId: ''
      }, // 店铺信息
      shippingMode: [],
      verificationState: {
        editBtnStateOk: false,
        inputState: false,
        btnBox: false
      },
      fitment: [
        {
          name: '默认',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/mb0.png',
          idx: '0',
          isState: false
        },
        {
          name: '模板一',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/mb1.png',
          idx: '1',
          isState: false
        },
        {
          name: '模板二',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/mb2.png',
          idx: '2',
          isState: false
        },
        {
          name: '模板三',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/mb3.png',
          idx: '3',
          isState: false
        },
        {
          name: '模板四',
          src:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/decorate_mode4.png',
          idx: '4',
          isState: false
        }
      ], // 装修模板
      banner: '',
      bannerUrl: '',
      dataInfo: {}
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    fitment1 () {
      let start = []
      let end = []
      this.fitment.forEach(_ => {
        if (_.idx === this.info.templateType) {
          _.isState = true
          start.push(_)
        } else {
          _.isState = false
          end.push(_)
        }
      })
      return start.concat(end)
    }
  },
  onShow () {
    this._findDecoration()
    this.getShopInfo()
    this.init()
  },
  methods: {
    getShopInfo () {
      const vm = this
      vm.info.name = vm.account.shopName
      vm.info.src = vm.account.logo
    }, // 商城头像名称
    serviceMode () {
      if (this.$cookie.get('isOne')) {
        this.$toast('请选择模板后再操作')
      } else {
        this.$router.push(
          '/pages/shop-management/shop-fitment-modeDeploy/main?shippingMode=' +
            this.shippingMode
        )
      }
    }, // 服务方式
    setVerification () {
      this.$router.push('/pages/shop-management/shop-fitment-veri/main')
    }, // 核销码设置
    templateSelect (val) {
      this.$router.push(
        '/pages/shop-management/template-select/select' +
          val +
          '/main?val=' +
          val +
          '&goodsTypeId=' +
          this.info.goodsTypeId
      )
      if (val === '1') {
        this.$cookie.set('banner', this.banner)
        this.$cookie.set('bannerUrl', this.bannerUrl)
      } else if (val === '4') {
        this.$cookie.set('template4Data', this.dataInfo)
      }
    }, // 模板选择
    _findDecoration () {
      const vm = this
      // let obj = {} // 存放默认位子的东西
      FIND_SHOP_DECORATION(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data !== null) {
              vm.dataInfo = r.data.data
              vm.info.templateType = r.data.data.template
              vm.info.goodsTypeId = r.data.data.goodsTypeId
              vm.shippingMode = r.data.data.shippingMode
              vm.banner = r.data.data.banner
              vm.bannerUrl = r.data.data.bannerUrl
              vm.$cookie.set('isOne', false)
              // vm.fitment.forEach(_ => {
              //   if (_.idx === r.data.data.template) {
              //     vm.fitment.splice(_, 1)
              //     _.isState = true
              //     obj = _
              //     console.log('_', _)
              //   }
              // })
              // vm.fitment.unshift(obj)
              // console.log('obj', obj)
              // console.log('fitment', vm.fitment)
            } else {
              vm.$cookie.set('isOne', true)
            }
          } else {
            vm.$toast(r.data.message)
            vm.dataInfo = {}
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 获取店铺装修信息
    init () {
      const vm = this
      vm.shippingMode = []
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.content {
  width: 100%;
  margin: auto;
  position: relative;
  .backgroundBule {
    width: 100%;
    height: 100%;
    background: #5e6dfb;
    position: absolute;
    top: 0;
    z-index: -1;
  }
  .kong {
    height: 30px;
  }
  .cont {
    background: #ececec;
    border-radius: 110px 0px 0px 0px;
    height: 100%;
    .contShow {
      display: flex;
      justify-content: flex-end;
      .show {
        width: 90%;
        height: 160px;
        border-radius: 110px 0px 0px 110px;
        background: #fff;
        margin-top: 30px;
        display: flex;
        .left {
          width: 40%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
          span {
            margin-top: 20px;
            font-size: 13px;
          }
        }
        .right {
          width: 60%;
          font-size: 13px;
          p {
            margin: 15px 0;
          }
          div {
            img {
              width: 80px;
              height: 80px;
            }
          }
        }
      }
    }
    // 模板选择
    .templateSelect {
      width: 340px;
      margin: 20px auto 0;
      .templateSelectTitle {
        font-size: 14px;
        color: #6386c5;
        margin-bottom: 15px;
      }
      .templateSelectBox {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        div {
          width: 105px;
          height: 200px;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          margin: 5px 4px;
          span {
            width: 50px;
            height: 20px;
            font-size: 10px;
            color: #fff;
            background: #0ead13;
            display: block;
            text-align: center;
            line-height: 20px;
            position: absolute;
            top: 10px;
            left: 0;
            z-index: 1;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
          }
          img {
            width: 100%;
            height: 100%;
          }
          p {
            font-size: 14px;
            line-height: 14px;
            color: #000;
            margin-top: 5px;
          }
        }
      }
    }
  }
  // 店铺信息及操作
  .consigneeInfo {
    margin: auto;
    height: auto;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .topInfo {
      display: flex;
      align-items: center;
      height: 100px;
      margin-left: 20px;
      .headPortrait {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin-right: 10px;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        span {
          font-size: 16px;
          color: #000;
        }
        p {
          font-size: 14px;
          color: #585858;
          span {
            font-size: 14px;
            color: #6386c5;
          }
        }
      }
    }
    .TopBtnBox {
      height: 60px;
      display: flex;
      border-top: 1px solid #fdfdfd;
      p {
        width: 50%;
        text-align: center;
        font-size: 14px;
        line-height: 40px;
        color: #6386c5;
      }
    }
  }
}
</style>
